<template>
  <div class="shop">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="订单号:">
        <el-input v-model="form.orderId" placeholder="请输入订单号"></el-input>
      </el-form-item>
      <el-form-item label="商品名称:">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="用户名:">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="所属代理:">
        <el-input v-model="form.agentName"></el-input>
      </el-form-item>
      <el-form-item label="订单创建时间:">
        <el-date-picker v-model="form.startTime"
          type="date"
          style="width:142px"
          size='small'
          value-format="yyyy-MM-dd"
          placeholder="选择开始时间">
        </el-date-picker> 
        ~ 
        <el-date-picker v-model="form.endTime"
          type="date"
          style="width:142px"
          value-format="yyyy-MM-dd"
          size='small'
          placeholder="选择结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="联盟状态:">
        <el-select v-model="form.status" placeholder="活动区域">
          <el-option label="全部" value=""></el-option>
          <el-option label="订单付款" value="0"></el-option>
          <el-option label="订单结算" value="1"></el-option>
          <el-option label="订单失效" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结算状态:">
        <el-select v-model="form.settleStatus" placeholder="活动区域">
          <el-option label="全部" value=""></el-option>
          <el-option label="未结算" value="0"></el-option>
          <el-option label="已结算" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <div class="search">
          <el-button type="primary" size='small' @click="searchIncomes">搜索</el-button>
        </div>  
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click='exportIncomeData'>导出数据</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData"
      style="width:100%"
      max-height="600"
      class="incomtable"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label='订单ID' width='100' prop='id'></el-table-column>
      <el-table-column label='订单号' width='160' prop='orderid'></el-table-column>
      <el-table-column label='联盟状态' width="80">
        <template slot-scope="scope">
          <p v-if='scope.row.status==0'>订单付款</p>
          <p v-if='scope.row.status==1'>订单结算</p>
          <p v-if='scope.row.status==2'>订单失效</p>
        </template>
      </el-table-column>
      <el-table-column label='商品ID' width='120' prop='num_iid'></el-table-column>
      <el-table-column label='所属推广位' prop='adzoneid' width='120'></el-table-column>
      <el-table-column label='购买用户' prop='username' width='100'></el-table-column>
      <el-table-column label='所属代理' prop='agentname' width='100'></el-table-column>
      <el-table-column label='佣金比例' prop='proportion' width='100'></el-table-column>
      <el-table-column label='成交金额' prop='amount' width='80'></el-table-column>
      <el-table-column label='收益预估' prop='yamount' width='80'></el-table-column>
      <el-table-column label='结算状态' width='80'>
        <template slot-scope="scope">
          <p v-if='scope.row.itaoke_status == 0'>未结算</p>
          <p v-if='scope.row.itaoke_status == 1'>已结算</p>
        </template>
      </el-table-column>
      <el-table-column label='创建时间' prop='create_time' width='150'></el-table-column>
      <el-table-column label='完成时间' prop='close_time' width='150'>
        <template slot-scope="scope">
          <p v-if='scope.row.close_time == "1970-01-01 08:00:00" ' > </p>
          <p v-else>{{ scope.row.close_time }}</p>
        </template>
      </el-table-column>
      <el-table-column label='操作'
        fixed='right' width=240>
        <template slot-scope="scope">
            <el-button size='mini' type="text" disabled @click="openPlatformDetail(scope.row.id,'1')">详情</el-button>
            <el-button size='mini' type="text" disabled @click="openPlatformDetail(scope.row.id,'1')">删除</el-button>
            <el-button size='mini' type="text" disabled @click="openPlatformDetail(scope.row.id,'1')">结算</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24">
      <div class="pagination">

        <el-pagination background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
import {searchOnlineIncomes} from '@/api/finance'
import { API_BASE_URL } from "@/config";
export default {
  components: {
  },
  data () {
    return {
      isShowIncomeDetail:false,
      currentId:'',
      type:0,
      form: {
        page: 1,
        size: 20,
        status: '',
        start_time: '',
        end_time: '',
        keywords: '',
        ordertype:0,
        orderstatus:0,
        orderId: '',
        title: '',
        username: '',
        agentName: '',
        startTime:'',
        endTime:'',
        settleStatus: '',
        isExport: '',
      },
      total: 0,
      tableData: [],
    }
  },
  mounted () {
    this.getOnlineIncomes()
  },
  methods: {
    exportIncomeData () {
      this.form.isExport = 1
      this.getOnlineIncomes()
    },
    searchIncomes () {
      this.form.page = 1;
      this.getOnlineIncomes()
    },
    pageChange(page) {
      this.form.page = page;
      this.getOnlineIncomes();
    },
    async getOnlineIncomes(){
      let url = '?type=1' + 
      '&page=' + this.form.page +
      '&order_id=' + this.form.orderId +
      '&settle_status=' + this.form.settleStatus +
      '&title=' + this.form.title +
      '&username=' + this.form.username +
      '&agent_name=' + this.form.agentName +
      '&status=' + this.form.status +
      '&is_export=' + this.form.isExport
      if(this.form.startTime) {
        url += '&start_time=' + Date.parse(this.form.startTime) / 1000
      }
      if(this.form.endTime) {
        url += '&end_time=' + Date.parse(this.form.endTime) / 1000
      }
      let res = await searchOnlineIncomes(url)
      if (res.code !== 10000){
        this.$message.error(res.message)
        this.form.isExport = ''
        return;
      }
      if(this.form.isExport === 1) {
        this.form.isExport = ''
        window.open(
          `${API_BASE_URL}/admin/download/zip/${res.data[1].download_token}`
        );
        return;
      }
      this.tableData = res.data.data;
      this.total = res.data.total;
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  },



}
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  .search {
    float: right;
    .input {
      width: 160px;
      margin-right: 2px;
    }
  }
  .select{
    margin:  0px 12px;
  }
  .select-right{
    margin-right: 12px;
  }
  .pagination {
    float: right;
    margin-top: 15px;
  }
  .incomtable{
    margin-top: 20px;
  }
}
</style>